<template>
  <div class="login-container">
    <div
      id="gradeTwoChart"
      :style="{ width: '95%', height: '550px' }"
    />
  </div>
</template>

<script scope>
// import echarts from "echarts";
import { getCountMonthReport } from '@/api/echarts'
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data() {
    return {
      CMCC: 0,
      CUCC: 0,
      CTCC: 0,
      BULL: 0,
      cmcc: [0, 300, 400, 200],
      cucc: [],
      ctcc: [],
      name1: [2021.06, 2021.07, 2021.08, 2021.09, '2021.10', 2021.11]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawLine()
  },
  methods: {
    getCountMonthReport() {
      getCountMonthReport().then((res) => {
        const cmcc = []
        const cucc = []
        const ctcc = []
        const name1 = []
        let name2 = ''
        for (let i = 0; i < res.data.dataCMCC.length; i++) {
          name2 = res.data.dataCMCC[i].name
          name1.push(name2)
          cmcc.push(res.data.dataCMCC[i].value)
          this.name1 = name1
          this.cmcc = cmcc
        }
        for (let j = 0; j < res.data.dataCTCC.length; j++) {
          ctcc.push(res.data.dataCTCC[j].value)
          this.ctcc = ctcc
        }
        for (let i = 0; i < res.data.dataCUCC.length; i++) {
          cucc.push(res.data.dataCUCC[i].value)
          this.cucc = cucc
        }
        this.drawLine()
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const gradeTwoChart = this.$echarts.init(
        document.getElementById('gradeTwoChart')
      )
      // 绘制图表
      gradeTwoChart.setOption({
        title: {
          text: '各运营商虚拟号数量对比',
          x: 'center',
          y: '20px',

          textStyle: {
            color: '#333333',
            fontWeight: 'bold',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['联通', '电信', '移动']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.name1
        },
        yAxis: [
          {
            name: '                  单位：张',
            type: 'value'
          }
        ],
        series: [
          {
            name: '联通',
            type: 'line',
            data: this.cucc
          },
          {
            name: '电信',
            type: 'line',
            data: this.ctcc
          },
          {
            name: '移动',
            type: 'line',
            data: this.cmcc
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
